<template>
  <div>
    <el-dialog class="dialog" :visible.sync="visible" :width="width" :modal-append-to-body="false" :show-close="true"
      :close-on-click-modal="false" :before-close="hide" :style="{ '--el-dialog-height': height }">
      <template slot="title">
        <div class="close" @click="hide"></div>
        <div class="dialog-header">
          <div class="header-title">保险{{params.handle=='add'?'添加':'修改'}}</div>
        </div>
      </template>
      <div class="dialog-body">
        <div class="form-box">
          <el-form ref="formRef" class="formStyle" :model="form" :rules="formRules" label-width="100px"
            label-position="left">
            <el-form-item label="保险类型" prop="insuranceType">
              <el-select v-model="form.insuranceType">
                <el-option v-for="type in insuranceTypeList" :label="type.label" :value="type.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="保险名称" prop="insuranceName">
              <el-input v-model="form.insuranceName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="保障金额" prop="protectionAmount">
              <el-input-number v-model.number="form.protectionAmount" placeholder="请输入" controls-position="right"
                :min="0" />
              <span class="unit">万元</span>
            </el-form-item>
            <el-form-item>
              <el-button @click="hide">取消</el-button>
              <el-button type="primary" @click="submitForm">确认</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import * as api from '@/views/AiBenefitAssociation/RecommendedInsurance/api.js';

export default {
  name: 'InsuranceEditDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: {},
    },
    width: {
      type: String,
      default: '80%',
    },
    height: {
      type: String,
      default: '915px',
    },
  },
  data() {
    return {
      dataLoading: false,
      form: {
        insuranceType: null,
        insuranceName: null,
        protectionAmount: undefined,
      },
      formRules: {
        insuranceType: [{ required: true, message: '请选择保险类型', trigger: 'change' }],
        insuranceName: [{ required: true, message: '请输入保险名称', trigger: 'change' }],
        protectionAmount: [{ required: true, message: '请输入保障金额', trigger: 'change' }],
      },
      insuranceTypeList: [
        { label: '医疗险', value: '医疗险' },
        { label: '意外险', value: '意外险' },
        { label: '重疾险', value: '重疾险' },
        { label: '其他险', value: '其他险' },
      ],
    };
  },
  watch: {
    visible: {
      handler(value) {
        if (value) {
          this.getData();
          this.form.insuranceType = this.params.type;
          if (this.params.formData) {
            this.form.id = this.params.formData.id;
            this.form.insuranceName = this.params.formData.insurance_name;
            this.form.protectionAmount = this.params.formData.protection_amount;
          }
        }
      },
      immediate: true,
    },
  },
  computed: {
    ...mapGetters(['userId']),
  },
  methods: {
    hide() {
      this.resetForm();
      this.$emit('update:visible', false);
    },
    resetForm() {
      this.form = this.$options.data().form;
    },
    getData() {
      api.getCountPersonaInsuranceByInsuranceType().then(({ data }) => {
        data.shift();
        this.insuranceTypeList = data.map((item) => {
          return { label: item.name, value: item.name };
        });
      });
    },
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (!valid) return;
        let params = {};
        if (this.params.handle == 'add') params = { ...this.form };
        if (this.params.handle == 'edit') params = { userId: this.userId, ...this.form };
        params.protectionAmount = params.protectionAmount.toString();
        api.addPersonaInsurance(params).then((res) => {
          this.$message.success(res.msg);
          this.$emit('success');
          this.hide();
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import './dialog.scss';
@import '@/assets/styles/mixin.scss';

::v-deep .el-dialog__body {
  padding-right: 5px !important;
}

.dialog-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.formStyle {
  @include el-form-style;
  ::v-deep .el-form-item {
    width: 100%;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0px;
      .el-form-item__content {
        text-align: center;
      }
    }
    .el-input-number {
      width: auto !important;
    }
    .unit {
      margin-left: 10px;
    }
  }
}
</style>
